<template>
  <!-- 标题展示 -->
  <van-nav-bar title="首页" />
  <!-- 具体内容展示 -->
  <div class="das-list">
    <!-- 服务 -->
    <div class="das-list-title">
      <strong>服务</strong>
    </div>
    <!-- 反馈和留言 -->
    <div class="ms-qt">
      <div class="qt-detail" @click="feedback">
        <div class="qt-detail_img">
          <img src="../../assets/img/huabi.png" alt="" />
        </div>
        <div class="qt-detail_serve">
          <h1>反馈</h1>
          <span>拥堵反馈</span>
        </div>
      </div>
      <div class="qt-detail" @click="leaveMessage">
        <div class="qt-detail_img">
          <img src="../../assets/img/message.png" alt="" />
        </div>
        <div class="qt-detail_serve">
          <h1>留言</h1>
          <span>消息留言</span>
        </div>
      </div>
    </div>
    <!-- 切换食堂 -->
    <div class="chang-meal" @click="jump2list">
      <strong>切换食堂</strong>
      <span class="change-meal_quto">></span>
      <span class="font14">{{ canteenNumber }} 个食堂</span>
    </div>
    <!-- 选中食堂展示 -->
    <div class="select-canteen">
      <!-- 展示卡片 -->
      <selectList :showInfo="showInfo" />
      <!-- 详细信息展示 -->
      <div class="select-canteen_details">
        <div class="select-canteen_details_first">
          <div>
            <strong class="textColor">约容纳</strong>
          </div>
          <div>120人</div>
        </div>
        <div class="select-canteen_details_times">
          <div>
            <strong class="textColor">营业时间</strong>
          </div>
          <div class="select-canteen_details_times_text">
            <p>早餐 {{ workingTime["tm"] }}</p>
            <p>午餐 {{ workingTime["af"] }}</p>
            <p>晚餐 {{ workingTime["ev"] }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 留言弹窗 -->
  <van-dialog
    v-model:show="show"
    :title="type == 1 ? '拥堵反馈信息' : '请输入您想要留的信息'"
    show-cancel-button
    @confirm="confirmEvent"
  >
    <van-cell-group inset>
      <van-field v-model="message" placeholder="请输入信息" />
    </van-cell-group>
  </van-dialog>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "@vue/runtime-core";
import { GetIndexList, SendMessage, SendFeedBack } from "@/api/index";
import selectList from "../../components/selectList.vue";
import { useRouter } from "vue-router";
import { Notify } from "vant";

export default defineComponent({
  components: {
    selectList,
  },
  setup() {
    // 变量区域
    const router = useRouter();
    const currentRate = ref(30);
    const rate = ref(30);
    const times = ref(30);
    const count = ref(30);
    const canteenNumber = ref("3");
    const canteenMaxCount = ref(12);
    const text = ref("100人");
    const workingTime = ref({});
    const currentPosition = ref("A栋B1层");
    const showInfo = reactive({
      indexPosition: "A栋食堂",
      currentRate: currentRate,
      currentPosition: currentPosition,
      rate: rate,
      text: text,
      times: times,
      count: count,
    });
    const show = ref(false);
    const message = ref("");
    const type = ref(1);

    // 方法区域
    const jump2list = () => {
      router.push("/select");
    };
    const feedback = () => {
      console.log("feed back");
      show.value = true;
      type.value = 1;
    };
    const leaveMessage = () => {
      console.log("leaveMessage");
      show.value = true;
      type.value = 2;
    };
    // 点击弹窗中的留言确认
    const confirmEvent = () => {
      console.log("show value", message.value);
      if (message.value.length == 0) {
        return;
      }
      if (type == 1) {
        SendFeedBack({ mes: message.value }).then((res) => {
          Notify({
            type: "success",
            message: type.value == 1 ? "反馈成功" : "留言成功",
          });
        });
      } else {
        SendMessage({ mes: message.value }).then((res) => {
          Notify({
            type: "success",
            message: type.value == 1 ? "反馈成功" : "留言成功",
          });
        });
      }
    };
    // 舒适化获取数据的方式
    onMounted(() => {
      // axios 获取数据然后赋值
      GetIndexList()
        .then((res) => {
          console.log("res", res.data);
          let _data = res.data;
          canteenNumber.value = _data.canteenNumber;
          canteenMaxCount.value = _data.canteenMaxCount;
          workingTime.value = _data.workingTime;
          currentPosition.value = _data.currentPosition;
          Object.assign(showInfo, _data.info);
        })
        .catch((err) => {
          console.log("err");
        });
    });
    return {
      currentRate,
      text,
      rate,
      showInfo,
      jump2list,
      feedback,
      leaveMessage,
      show,
      message,
      confirmEvent,
      type,
      canteenNumber,
      canteenMaxCount,
      workingTime,
      currentPosition,
    };
  },
});
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #f8f8f8;
}
.das-list {
  padding: 10px;
  // background: red;
  height: calc(100vh - 66px);
  // background-image: url(../../assets/img/pic_banner41@2x.png);
  background-size: cover;
  .das-list-title {
    margin: 8px 0;
  }
  .ms-qt {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    .qt-detail {
      height: 80px;
      width: 45vw;
      background: #e8f4fe;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      .qt-detail_serve {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        h1 {
          font-size: 16px;
        }
        span {
          font-size: 14px;
        }
      }
      .qt-detail_img {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: yellowgreen;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .qt-detail:last-child {
      background: #fae5df;
    }
  }
  .chang-meal {
    display: flex;
    align-items: center;
    height: 60px;
    .change-meal_quto {
      padding: 0 26px 0 58px;
      color: #ccc;
    }
  }
  .select-canteen {
    .select-canteen_details {
      padding-top: 34px;
      padding-left: 24px;
      .select-canteen_details_first {
        display: flex;
        justify-content: space-evenly;
        padding-bottom: 18px;
        div {
          width: 50%;
        }
      }
      .select-canteen_details_times {
        display: flex;
        justify-content: space-evenly;
        div {
          width: 50%;
        }
        .select-canteen_details_times_text {
          line-height: 30px;
        }
      }
    }
  }
  .textColor {
    color: orange;
  }
  .font14 {
    font-size: 14px;
  }
}
.wrapper {
  width: 300px;
  height: 300px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
